<template>
  <div class="index">
  <div class="header">
    <el-row>
      <el-col :span="8"><div class="grid-content bg-purple logo">Coding<span class="logo-text">小苹果</span></div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1">首页</el-menu-item>
          <el-submenu index="2">
            <template slot="title">应用</template>
            <el-submenu index="2-1">
              <template slot="title">PC</template>
              <el-menu-item index="2-1-1">内推小王子【熟人推荐招聘网站】</el-menu-item>
              <el-menu-item index="2-1-2">大梦想程序商店【提供最新热门、实用的微信小程序】</el-menu-item>
              <el-menu-item index="2-1-3">雪粉团【雪佛兰官方粉丝论坛】</el-menu-item>
              <el-menu-item index="2-1-4">天天老友【“友”你不孤单 – 天天老友APP】</el-menu-item>
              <el-menu-item index="2-1-5">7天时间【帮助你管理时间的神器】</el-menu-item>
              <el-menu-item index="2-1-5">可视化【数据可视化】</el-menu-item>
            </el-submenu>
            <el-submenu index="2-2">
              <template slot="title">webApp</template>
              <el-menu-item index="2-2-1">内推小王子【熟人推荐招聘网站】</el-menu-item>
              <el-menu-item index="2-2-2">大梦想程序商店【提供最新热门、实用的微信小程序】</el-menu-item>
              <el-menu-item index="2-2-3">雪粉团【雪佛兰官方粉丝论坛】</el-menu-item>
              <el-menu-item index="2-1-4">7天时间【帮助你管理时间的神器】</el-menu-item>
            </el-submenu>
            <el-submenu index="2-3">
              <template slot="title">微信小程序</template>
              <el-menu-item index="2-3-1">内推小王子【熟人推荐招聘网站】</el-menu-item>
              <el-menu-item index="2-3-2">大梦想程序商店【提供最新热门、实用的微信小程序】</el-menu-item>
              <el-menu-item index="2-3-2">天天老友【“友”你不孤单 – 天天老友APP】</el-menu-item>
              <el-menu-item index="2-3-2">7天时间【帮助你管理时间的神器】</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">个人履历</a></el-menu-item>
          <el-menu-item index="4">
            <router-link to="/login">登录</router-link>
          </el-menu-item>
        </el-menu>
       </div></el-col>
    </el-row>
  </div>
  <div class="mid"><router-view></router-view></div>
  <div class="footer">
    <div class="container">
      <el-row>
        <el-col :span="8"><div class="grid-content bg-purple">
            <h1>CONTACT INFO</h1>
            <div>
                <p>浙江省杭州市滨江区</p>
                <p>南环路拎包客创业中心</p>
                <p>Email : <a href="mailto:justcoding@qq.com">1035727764@qq.com</a></p>
            </div>
          </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple-light">
           <h1>STAY CONNECTED</h1>
              <ul class="social-connected list-unstyled">
                  <li><a href="https://www.zhihu.com/people/you-you-56-36/activities" target="_blank"><img src="../assets/img/zhi.png" alt="知乎专栏" ></a></li>
                  <!-- <li><a href="http://weibo.com/p/1005051826616704" target="_blank"><img src="/Public/resource/common/img/sina_weibo.png" alt="新浪微博" width="30" height="30"></a></li> -->
              </ul>
          </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
    </div>
  </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped lang="less">
  .index{
    margin: 0 auto;
  }
  .header,.mid{
    width: 1190px;
    margin: 0 auto;
  }
  .mid{
    margin-top: 100px;
    margin-bottom: 100px;
  }
  .logo{
    color: #777;
    font-size: 30px;
    font-weight: 100;
    line-height: 30px;
    margin-top: 30px;
    padding: 0 0 0 15px;
  }
  .logo-text{
    color: #409EFF;
    margin-left: 10px;
  }
  .container{
    width: 1190px;
    margin: 0 auto;
  }
  .footer{
    background: #475268;
    color: #fff;
    padding: 50px 0;
    margin-top: 50px;
    display: inline-block;
    width: 100%;
    font-weight: 300;
  }
  .footer img{
    width: 30px;
    height: 30px;
  }
  .footer p {
    line-height: 44px;
    font-size: 14px;
  }
  .footer h1{
    line-height: 44px;
  }
  .footer a{
    color: #409EFF;
  }
  .footer ul{
    margin-top: 10px;
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
